<template>
  <view class="container">
    <view class="content">
      <component :is="currentPage"></component>
    </view>
    <BottomNav class="nav" :current="current" @change="changeTab" />
  </view>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'
import OneInfo from '@/pages/oneInfo.vue'
import Word from '@/pages/word.vue'
import Mine from '@/pages/mine.vue'
import Play from '@/pages/play.vue'
import VocalTest from '@/pages/VocabularyTestHome.vue'

export default {
  components: {
    BottomNav,
    OneInfo,
    Word,
    Play,
    VocalTest,
    Mine
  },
  data() {
    return {
      current: 'oneInfo'
    }
  },
  computed: {
    currentPage() {
      if (this.current === 'oneInfo'){
        return 'OneInfo'
      }else if (this.current === 'word'){
        return 'Word'
      }else if (this.current === 'play'){
        return 'Play'
      }
      return 'VocalTest'
    }
  },
  methods: {
    changeTab(tab) {
      this.current = tab
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;
  overflow: auto;
}

::v-deep .u-tabbar {
  flex: unset !important;
}

.nav{
  z-index: 9999;
}
</style>
